﻿@{
    ViewData["Title"] = "EntityMarketUpd";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<br />
<button id="updRowBtn" class="layui-btn" style="background-color:red;border-radius:5px">修改</button>

<table id="dataTable" class="layui-table">
    <thead>
        <tr>
            <th style="width:100px">耳号</th>
            <th style="width:150px">成交价（元）</th>
            <th style="width:150px">定价（元）</th>
            <th style="width:150px">折扣比例</th>
            <th style="width:100px">等级</th>
            <th style="width:100px">品种</th>
            <th style="width:150px">性别</th>
            <th style="width:150px">羊只类型</th>
            <th style="width:150px">繁殖状态</th>
            <th style="width:100px">栋舍</th>
            <th style="width:100px">栏位</th>
            <th style="width:150px">出生日期</th>
            <th style="width:150px">出生重（kg）</th>
            <th style="width:150px">断奶重（kg）</th>
            <th style="width:100px">父号</th>
            <th style="width:100px">母号</th>
            <th style="width:100px">月龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div class="select-wrapper">
                    <select name="earNnumber" id="earNnumber" lay-filter="earNnumber" lay-verify="required">
                        <option value="">请选择耳号</option>
                    </select>
                </div>

                <input type="hidden" name="marketId" id="marketId">
            </td>
            <td><input type="text" name="totalPrice" id="totalPrice" lay-verify="required" autocomplete="off" class="layui-input" style="width:120px"></td>
            <td><input type="text" name="price" id="price" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="discount_ratio" id="discount_ratio" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td>
                <div class="select-wrapper">
                    <select name="class" id="class" lay-filter="class" lay-verify="required">
                        <option value="">请选择等级</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="select-wrapper">
                    <select name="variety" id="variety" lay-filter="variety" lay-verify="required">
                        <option value="">请选择品种</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="select-wrapper">
                    <select name="sex" id="sex" lay-verify="required">
                        <option value=0>母</option>
                        <option value=1>公</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="select-wrapper">
                    <select name="sheep_type" id="sheep_type" lay-verify="required">
                        <option value=0>种母</option>
                        <option value=1>种公</option>
                    </select>
                </div>
            </td>
            <td>
                <div class="select-wrapper">
                    <select name="reproduction_type" id="reproduction_type" lay-filter="reproduction_type" lay-verify="required">
                        <option value="">请选择繁殖状态</option>
                    </select>
                </div>
            </td>
            <td>
                <input type="text" name="cottageName" id="cottageName" disabled lay-verify="required" autocomplete="off" class="layui-input" style="width:120px">
            </td>
            <td>
                <input type="text" name="fieldName" id="fieldName" disabled lay-verify="required" autocomplete="off" class="layui-input" style="width:120px">
            </td>

            <td><input type="date" id="eDate" name="eDate" ></td>
            <td><input type="text" name="birth_weight" id="birth_weight" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="weaning_weight" id="weaning_weight" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="father_sign" id="father_sign" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="parameter" id="parameter" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
            <td><input type="text" name="age_moon" id="age_moon" lay-verify="required" autocomplete="off" class="layui-input" style="width:100px"></td>
        </tr>
    </tbody>
</table>


<script>

    var $ = layui.jquery;

    $(function () {
        setTimeout(function () {
            FielCostesInfo()

        }, 100)
    })

    var Id = location.search.substring(2).split("=")[1];

    console.log(Id);

    function FielCostesInfo() {
        $.get("http://10.31.60.18:8000/AuthorizationGetRout/api/DepartmentShow/EntityMarkeFindId?marketId="+Id, function (res) {
            console.log(res);
            $("#marketId").val(res.marketId);
            $("#earNnumber").val(res.earbugles);
            $("#cottageName").val(res.cottageName);
            $("#fieldName").val(res.fieldName); 
            $("#totalPrice").val(res.totalPrice);
            $("#price").val(res.price);
            $("#discount_ratio").val(res.discount_ratio);
            $("#class").val(res.class);
            $("#variety").val(res.variety);
            $("#sex").val(res.sex ? 1 : 0);
            $("#sheep_type").val(res.sheep_type);
            $("#culture_type").val(res.culture_type);
            $("#reproduction_type").val(res.reproduction_type);
            $("#eDate").val(res.eDate.split("T")[0]);
            $("#birth_weight").val(res.birth_weight);
            $("#weaning_weight").val(res.weaning_weight);
            $("#father_sign").val(res.father_sign);
            $("#parameter").val(res.parameter);
            $("#age_moon").val(res.age_moon);
        })
    }
    //绑定部门下拉框
    $(document).ready(function () {
        $.ajax({
            url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/DeparList',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var departDate = res;
                var select = $('#departmentId');
                $.each(departDate, function (index, item) {
                    var option = $('<option>').val(item.id).text(item.name);
                    select.append(option);
                })
                //手动触发 layui组件的渲染
                layui.form.render('select');
            },
        })
    })

    //绑定品种
    $(document).ready(function () {
        $.ajax({
            url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetSheepBreeds',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var enumData = res; // 直接使用返回的数据
                var select = $('#variety');
                $.each(enumData, function (index, item) {
                    // 使用正确的字段添加选项到下拉框中
                    var option = $('<option>').val(item.value).text(item.value);
                    select.append(option);
                });
                // 手动触发 layui 组件的渲染
                layui.form.render('select');
            },
            error: function () {
                // 处理 AJAX 请求失败的情况
                console.error('Failed to fetch data for dropdown.');
            }
        });
    });

    //绑定等级
    $(document).ready(function () {
        $.ajax({
            url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetGeneticGrade',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var enumData = res; // 直接使用返回的数据
                var select = $('#class');
                $.each(enumData, function (index, item) {
                    // 使用正确的字段添加选项到下拉框中
                    var option = $('<option>').val(item.value).text(item.value);
                    select.append(option);
                });
                // 手动触发 layui 组件的渲染
                layui.form.render('select');
            },
            error: function () {
                // 处理 AJAX 请求失败的情况
                console.error('Failed to fetch data for dropdown.');
            }
        });
    });

    //绑定状态
    $(document).ready(function () {
        $.ajax({
            url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/GetReproductiveState',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var enumData = res; // 直接使用返回的数据
                var select = $('#reproduction_type');
                $.each(enumData, function (index, item) {
                    // 使用正确的字段添加选项到下拉框中
                    var option = $('<option>').val(item.value).text(item.value);
                    select.append(option);
                });
                // 手动触发 layui 组件的渲染
                layui.form.render('select');
            },
            error: function () {
                // 处理 AJAX 请求失败的情况
                console.error('Failed to fetch data for dropdown.');
            }
        });
    });

    //绑定耳号
    $(document).ready(function () {
        $.ajax({
            url: 'http://10.31.60.18:8000/ArchivesGetRout/api/Archives/ArchivesAllInfo',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                var enumData = res; // 直接使用返回的数据
                var select = $('#earNnumber');
                $.each(enumData, function (index, item) {
                    // 使用正确的字段添加选项到下拉框中
                    var option = $('<option>').val(item.earNnumber).text(item.earNnumber);
                    select.append(option);
                });
                // 手动触发 layui 组件的渲染
                layui.form.render('select');
            },
            error: function () {
                // 处理 AJAX 请求失败的情况
                console.error('Failed to fetch data for dropdown.');
            }
        });
    });

    //绑定栋舍
    var data = [];
    $(document).ready(function () {
        $.ajax({
            url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/CootList',
            type: 'get',
            dataType: 'json',
            success: function (res) {
                data = res; // 直接使用返回的数据
                var select = $('#buildings');
                $.each(data, function (index, item) {
                    // 使用正确的字段添加选项到下拉框中
                    var option = $('<option>').val(item.name).text(item.name);
                    select.append(option);
                });
                // 手动触发 layui 组件的渲染
                layui.form.render('select');
            },
            error: function () {
                // 处理 AJAX 请求失败的情况
                console.error('Failed to fetch data for dropdown.');
            }
        });
    });
    // 栋舍栏位二级联动
    $('#buildings').change(function () {
        var name = $("#buildings").val();
        var id = 0;
        $.each(data, function (index, item) {
            if (name == item.name) {
                id = item.id;
            }
        });
        //监听到了下拉框选择的选项，传递过来
        $.get({
            url: 'http://10.31.60.18:8000/AuthorizationGetRout/api/Cottage/FieidList', // 后端枚举数据接口地址
            data: {
                id: id
            },
            dataType: "json",
            success: function (res) {
                $("#columns").empty();
                var option = '<option value=" ">' + "请选择栏位" + '</option>';
                $("#columns").append(option);
                $.each(res, function (index, item) {
                    // 使用正确的字段添加选项到下拉框中
                    var option = $('<option>').val(item.name).text(item.name);
                    $('#columns ').append(option);
                });
                // 手动触发 layui 组件的渲染
                layui.form.render('select');
            },
            error: function () {
                // 处理 AJAX 请求失败的情况
                console.error('Failed to fetch data for dropdown.');
            }
        });
    });
    //修改
    $('#updRowBtn').on('click', function () {
        var form = {
            marketId: $("#marketId").val(),
            earbugles: $("#earNnumber").val() == "" ? null : $("#earNnumber").val(),
            cottageName: $("#cottageName").val() == "" ? null : $("#cottageName").val(),
            fieldName: $("#fieldName").val() == "" ? null : $("#fieldName").val(),

            totalPrice: $("#totalPrice").val() == "" ? null : $("#totalPrice").val(),
            price: $("#price").val() == "" ? null : $("#price").val(),
            discount_ratio: $("#discount_ratio").val() == "" ? null : $("#discount_ratio").val(),
            class: $("#class").val() == "" ? null : $("#class").val(),
            variety: $("#variety").val() == "" ? null : $("#variety").val(),

            sex: $("#sex").val() == "" ? null : $("#sex").val(),
            sheep_type: $("#sheep_type").val() == "" ? null : $("#sheep_type").val(),
            culture_type: $("#culture_type").val() == "" ? null : $("#culture_type").val(),
            reproduction_type: $("#reproduction_type").val() == "" ? null : $("#reproduction_type").val(),

            eDate: $("#eDate").val() == "" ? null : $("#eDate").val(),

            birth_weight: $("#birth_weight").val() == "" ? null : $("#birth_weight").val(),
            weaning_weight: $("#weaning_weight").val() == "" ? null : $("#weaning_weight").val(),
            father_sign: $("#father_sign").val() == "" ? null : $("#father_sign").val(),
            parameter: $("#parameter").val() == "" ? null : $("#parameter").val(),
            age_moon: $("#age_moon").val() == "" ? null : $("#age_moon").val(),

        }

        console.log(form)

        $.ajax({
            type: 'PUT',
            url: 'http://10.31.60.18:8000/AuthorizationSetRout/api/EntityMarket/EntityMarketUpd', // 根据实际情况修改ControllerName和ActionName
            data: JSON.stringify(form),
            contentType: "application/json",
            success: function (res) {
                if (res > 0) {
                    layer.msg('修改成功', { icon: 1 }, function () {
                        location.href = '/EntityPurchase/EntityMarketShow'
                    });
                } else {
                    layer.alert('修改失败', {
                        icon: 1,
                        shadeClose: true,
                    })
                }
            },
            error: function (xhr, status, error) {
                // 处理错误响应
                console.error(error);
            }
        });
    })


</script>



<style>
    /* 为日期输入框添加样式 */
    input[type="date"] {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f9f9f9;
        font-size: 14px;
        color: #333;
        width: 150px;
        /* 设置一个合适的宽度 */
    }
        /* 您可以根据需要添加其他样式 */
        input[type="date"]:focus {
            border-color: #007BFF;
            outline: none;
        }

    #dataTable {
        width: 100%; /* Ensure table takes full width of its container */
        max-width: 100%; /* Restrict table width to 100% of parent container */
        overflow-x: auto; /* Enable horizontal scrolling */
    }
        /* Ensure table header cells match width of table cells in body */
        #dataTable thead th {
            white-space: nowrap; /* Prevent wrapping of header text */
        }

    /* 模拟layui的下拉框样式 */
    .select-wrapper {
        position: relative;
        display: inline-block;
        font-family: Arial, sans-serif;
        overflow: hidden;
        border: 1px solid #e6e6e6; /* 边框样式 */
        border-radius: 4px; /* 圆角 */
        background-color: #fff; /* 背景颜色 */
    }

        .select-wrapper select {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: none;
            padding: 8px 10px;
            font-size: 14px;
            cursor: pointer;
            width: 200px;
            background: transparent; /* 透明背景 */
        }

        .select-wrapper::after {
            content: '\25BE'; /* 下三角形符号 */
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            pointer-events: none;
        }

        /* 根据选中状态改变样式 */
        .select-wrapper select:focus + ::after {
            color: #009688; /* 选中时的颜色 */
        }

</style>




